<template>
    <h2>房号列表展示页面</h2>
    房号名称<input type="text" v-model="name"/>
    <input type="button" value="查询" @click="SelectData"/>
    <input type="button" value="添加" @click="addNum"  />
    <input type="button" value="导出" @click="ExportFile"/>
    <table border="1">
       <thead>
        <tr>
            <td>房号编号</td>
            <td>房号名称</td>
            <td>房号楼层</td>
            <td>具体房间号</td>
            <td>房号状态</td>
            <td>操作</td>
        </tr>
       </thead>
       <tbody>
        <tr v-for="item in number">
            <td>{{item.RN_Id}}</td>
            <td>{{item.RN_Name}}</td>
            <td>{{item.RN_Floor}}</td>
            <td>{{item.RN_Num}}</td>
            <td>{{item.RN_State==true?"启用":"禁用"}}</td>
            <td>
                <input type="button" value="删除" @click="delNum(item.RN_Id)"/>
                <input type="button" value="编辑" @click="editNum(item.RN_Id)"/>             
            </td>
        </tr>
       </tbody>               
    </table>
    共{{ page.count }}条数据,每页{{ page.size }}条，第{{ page.index }}/{{ page.pcount }}页
    <a href="#" style="margin-right:10px" @click="PageChange('F')">首页</a>
    <a href="#" style="margin-right:10px" @click="PageChange('P')">上一页</a>
    <a href="#" style="margin-right:10px" @click="PageChange('N')">下一页</a>
    <a href="#" style="margin-right:10px" @click="PageChange('E')">尾页</a>
    <select v-model="cSize" @change="ChangeSize">
        <option value="4">每页4条</option>       
        <option value="6">每页6条</option>
        <option value="8">每页8条</option>
    </select>
    <input type="text" v-model="nindex" style="width:20px"/>
    <input type="button" value="跳转" @click="jump"/>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
const router= useRouter();
import axios from 'axios'
const PageChange=(mes:string)=>{
    switch(mes)
    {
        case 'F':page.value.index=1;break;
        case 'P':
            if(page.value.index>1)
            {
                page.value.index--;
            }
            else
            {
                alert('已经是第一页了');
            }
            break;
        case 'N':
            if(page.value.index<page.value.pcount)
            {
                page.value.index++;
            }
            else
            {
                alert('已经是最后一页了');
            }
            break;
        case 'E':page.value.index=page.value.pcount;break;
    }
    loadData();
}
const cSize=ref(4);
const ChangeSize=()=>{
    page.value.size=cSize.value;
    page.value.index=1;
    loadData();
}
const nindex=ref("");
const jump=()=>{
    if(nindex.value=="")
    {
        alert('请输入页码');
        return;
    }
    if(isNaN(Number(nindex.value)))
    {
        alert('请输入数字');
        return;
    }
    if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
    {
        page.value.index=Number(nindex.value);
        loadData();
    }
    else
    {
        alert('请输入有效页码');
        return;
    }
}

const editNum=(RN_Id:number)=>{
    router.push({
        path:'/editNumber',
        query:{
            RN_Id:RN_Id
        }
    })
}
const delNum=(RN_Id:number)=>{
   if(confirm('确定删除吗'))
   {
    axios.delete('https://localhost:44320/api/Room/NumberDel',{
        params:{
            RN_Id:RN_Id
        }
    })
    .then(res=>{
        if(res.data>0)
        {
            alert('删除成功');
            page.value.index=1;
            loadData();
        }
        else
        {
            alert('删除失败');
        }
    })
   }
}

const ExportFile=()=>{
    axios.get('https://localhost:44320/api/Room/ExportNumFile',{
        params:{
            filePath:"C:\\Users\\23285\\Desktop\\ExportFile\\RoomNumber.xlsx"
        }
    })
    .then(res=>{
        if(res.data>0)
        {
            alert('导出成功');
        }
        else{
            alert('导出失败');
        }
    })
}
const number=ref([{
      "RN_Id": 1,
      "RN_Name": "",
      "RN_Floor": null,
      "RN_Num": null,
      "RN_State": true
    }] )
    const name=ref("");
    const page=ref({
        index:1,
        size:4,
        count:0,
        pcount:0
    })
onMounted(()=>{
   loadData();
})
const loadData=()=>{
    axios.get('https://localhost:44320/api/Room/NumberShow',{
        params:{
            index:page.value.index,
            size:page.value.size,
            name:name.value
        }
    })
    .then(res=>{
        number.value=res.data.pageList;
        page.value.count=res.data.count;
        page.value.pcount=res.data.pcount;
    })
}
const SelectData=()=>{
    page.value.index=1;
    loadData();
}
const addNum=()=>{
    router.push('/addNumber');
}
</script>